<template>
    <div>
         <Row>
            <Col span="24">
                <Card style="margin-bottom: 10px">
                    <Form inline>
                        <FormItem style="margin-bottom: 0">
                            <Select v-model="searchInfo.status" clearable placeholder='请选择状态' style="width:100px">
                                <Option :value="1">启用</Option>
                                <Option :value="0">禁用</Option>
                            </Select>
                        </FormItem>
                        <FormItem style="margin-bottom: 0">
                            <Input v-model="searchInfo.rule_name" placeholder=""></Input>
                        </FormItem>
                        <FormItem style="margin-bottom: 0">
                            <Button type="primary" @click="search" icon="android-search">查询</Button>
                            <Button type="success" @click="doModel" icon="plus-round">新增</Button>
                        </FormItem>
                    </Form>
                </Card>
            </Col>
        </Row>
        <Row>
            <Col span="24">
                <Card>
                    <div class="ivu-table-wrapper">
                        <div class="ivu-table ivu-table-border">
                            <table cellspacing="0" cellpadding="0" border="0" style="width: 1073px;">
                                <thead>
                                    <tr>
                                        <th class="ivu-table-column-center">名称</th>
                                        <th class="ivu-table-column-center">介绍</th>
                                        <th class="ivu-table-column-center">状态</th>
                                        <th class="ivu-table-column-center">操作</th>
                                    </tr>
                                </thead>
                                <tbody v-for="(vm,index) in tableData" :key="index">
                                    <tr>
                                        <td class="ivu-table-column-center">{{vm.role_name}}</td>
                                        <td class="ivu-table-column-center">{{vm.role_txt}}</td>
                                        <td class="ivu-table-column-center">
                                            <i-switch v-model="vm.status" :true-value="1" :false-value="0" @on-change="menuSwitch(vm)">
                                              <span slot="open">开</span>
                                              <span slot="close">关</span>
                                            </i-switch>
                                        </td>
                                        <td class="ivu-table-column-center">
                                            <i-button type="primary" @click="authEdit(vm)">编辑</i-button>
                                           <Poptip style="text-align:left;" confirm title="您确定要删除这条数据吗？" @on-ok="authDel(vm)">
                                               <Button type="error">删除</Button>
                                            </Poptip> 
                                        </td>                                    
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="margin-top-15" style="text-align: center">
                         <Page :total="searchInfo.count" :current="searchInfo.page"  @on-change="changePage"  show-elevator show-sizer show-total></Page>
                     </div>
                </Card>
            </Col>
        </Row>
        <Modal v-model="modalSetting.show" width="668" :styles="{top: '30px'}" @on-visible-change="doCancel">
            <p slot="header" style="color:#2d8cf0;">
                <Icon type="information-circled"></Icon>
                <span>{{formItem.id ? '编辑' : '新增'}}角色</span>
            </p>
            <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="80">
                <FormItem label="角色名称" prop="role_name">
                    <Input v-model="formItem.role_name" placeholder="输入角色名称"></Input>
                </FormItem>
                <FormItem label="角色介绍" prop="role_txt">
                    <Input v-model="formItem.role_txt" placeholder="请输入角色介绍"></Input>
                </FormItem>
                <formItem label="权限设置" prop="role_module">
                     <Tree :data="treeData" ref="formTree" show-checkbox style="border:1px solid #dddee1; padding-left:10px; overflow-x:hidden; height:250px;  border-radius: 4px;"></Tree>
                </formItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="doModel" style="margin-right: 8px">取消</Button>
                <Button type="primary" @click="authSave" :loading="modalSetting.loading">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import {authSave} from '@/validate/auth'
export default {
    name: 'system_auth',
    data () {
        return{
            tableData:[],
            treeData:[],
            ruleValidate: authSave,
            searchInfo:{
                status:'',
                rule_name:'',
                page:1,
                count:0
            },
            modalSetting: {
                show: false,
                loading: false,
                index: 0
           },
            formItem: {
                role_name: '',
                role_txt: '',
                role_module:[],
                id: 0
            },
        }
    },
    created(){
        this.getList();
        this.getMenu();
    },
    methods:{
        //修改权限
        authEdit(vm){
            this.formItem.id = vm.id;
            this.formItem.role_name = vm.role_name;
            this.formItem.role_txt = vm.role_txt;
            this.formItem.role_module = vm.role_module ? vm.role_module.split(',') : [];
            this.modalSetting.show = true;
            this.getMenu();
        },
        //删除权限
        authDel(vm){
            this.$http({url:this.$api.auth.delete},{id: vm.id}).then(res=>{
                if (res.code === 1) {
                    this.$Message.success(res.msg);
                } else  this.$Message.error(res.msg);
            });
        },
        //保存信息
        authSave(){
            let self = this;
            let ruleNodes = self.$refs['formTree'].getCheckedNodes();
            console.log("ruleNodes",ruleNodes);
            console.log(typeof self.formItem.role_module);
            if (ruleNodes.length > 0) {
                for(let i in ruleNodes){
                    self.formItem.role_module.push(ruleNodes[i].id);
                }
            }

          
            self.$refs['myForm'].validate((valid) => {
                if (valid) {
                    self.modalSetting.loading = true;
                    self.formItem.role_module = self.formItem.role_module.toString();
                    self.$http({url:self.$api.auth.save},self.formItem).then(res=>{
                        if (res.code === 1) {
                            self.$Message.success(res.msg);
                        } else  self.$Message.error(res.msg);
                            self.getList();
                            self.doCancel();
                            self.doModel();
                    });
                }
            });

        },
        //弹出框
        doModel(){
            this.modalSetting.show =! this.modalSetting.show;
         
        },
        //关闭弹框
        doCancel (data) {
            if (!data) {
                this.formItem.id = 0;
                this.$refs['myForm'].resetFields();
                this.modalSetting.loading = false;
                this.modalSetting.index = 0;
            }
         },
        //查询
        search () {
            this.searchInfo.page = 1;
            this.getList();
        },
        //页码改变的回调，返回改变后的页码
        changePage (page) {
            this.searchInfo.page = page;
            this.getList();
        },
        //列表
        getList(){
             this.$http({url:this.$api.auth.list},this.searchInfo).then(res=>{
                    if (res.code == 1) {
                        this.tableData = res.data.list;
                        this.searchInfo.count = res.data.count;
                    } else vm.$Message.error(res.msg);
             })
        },
        //菜单列表
        getMenu(){
             this.$http({url:this.$api.menu.list},{}).then(res=>{
                    if (res.code == 1) {
                        this.treeData = this.getTree(res.data);
                    } else vm.$Message.error(res.msg);
             })      
        },
        getTree(tree = []) {
            let arr = [];
            if (!!tree && tree.length !== 0) {
                tree.forEach(item => {
                    let obj = {};
                    obj.id = item.id;
                    obj.title = item.name;
                    obj.expand = true;
                    if(this.formItem.role_module.indexOf(item.id) > -1 && this.formItem.id){
                       obj.selected = true;
                    }
                    
                    obj.children = this.getTree(item.children); // 递归调用
                    arr.push(obj);
                });
            }

            return arr;
        },
    }
}
</script>